import React from 'react'
import { Flex } from 'antd-mobile-v2'
import {  useNavigate } from 'react-router-dom'

import PropTypes from 'prop-types'

// 导入样式
import './index.scss'

export default function SearchHeader({cityName,className}){
    const navigate = useNavigate()
    return (
         // 搜索框
         <Flex className={["search-box",className || ""].join(' ')}>
         {/* 右侧白色区域 */}
         <Flex className="search">
             {/* 位置 */}
             <div className="location" onClick={() => navigate('/citylist')}>
                 <span className="name">{cityName}</span>
                 <i className="iconfont icon-arrow"></i>
             </div>
             {/* 搜索表单 */}
             <div className="form" onClick={() => navigate('/search')}>
                 <i className="iconfont icon-search"></i>
                 <span className="text">请输入小区或地址</span>
             </div>
         </Flex>
         {/* 右侧地图图标 */}
         <i className="iconfont icon-map" onClick={() => navigate('/map')}></i>
     </Flex>
    )
}

// 添加属性校验
SearchHeader.propTypes={
    cityName:PropTypes.string.isRequired
}